<template>
	<view class="">
		<view class="common-tabs-box">
			<u-navbar title-color="#fff" back-icon-color="#333333" :is-fixed="true" :is-back="false">
				<view class="slot-wrap">
					<view class="slot-wrap-left" @click="back"><u-icon name="arrow-left"></u-icon></view>
					<view class="slot-wrap-title">个人简介</view>
					<text class="common-active-text" @click="submit">保存</text>
				</view>
			</u-navbar>
		</view>
		<view class="padding">
			<u-form :model="form" ref="uForm" :rules="rules" :errorType="['message']" :border-bottom="false">
				<view class="common-msg-row">
					<u-form-item prop="introduction">
						<u-input v-model="form.introduction" type="textarea" placeholder="请填写擅长领域" :auto-height="false" maxlength="800" :clearable="false" />
						<view class="numerical">
							{{form.introduction.length}}/800
						</view>
					</u-form-item>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import storage from "@/utils/storage";
	import { API } from "@/config/myApi.js";
	export default {
		data() {
			return {
				form: {
					introduction: storage.getU_Center() ? storage.getU_Center().introduction : '',
				},
				rules: {
					introduction: [{
							required: true,
							message: '内容不能为空',
							trigger: ['blur', 'change']
						},
						{
							min: 5,
							message: '个人简介不能少于5个字符',
							trigger: ['blur', 'change']
						}
					]
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log("表单",this.form);
						let introduction = this.form.introduction
						API.editOwn({introduction}).then(res =>{
							if(res.code === 200) {
								uni.showToast({
									title:'保存成功',
									icon:'none'
								})
								uni.navigateBack()
								// API.u_center().then(res =>{
								// 	if(res.code === 200){
								// 		this.$store.dispatch('A_userInfo')
								// 	}
								// })
							} else{
								uni.showToast({
									title:res.message,
									icon:"none"
								})
							}
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "@/static/css/common-navbar.scss";
	
	.common-msg-row {
		position: relative;
		padding: 0rpx 24rpx;
		margin-bottom: 50rpx;
		width: 100%;
		min-height: 300rpx;
		background: #fff;
		border-radius: 14rpx;
	
		// 计算数字
		.numerical {
			position: absolute;
			right: 24rpx;
			bottom: 24rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
			line-height: 40rpx;
		}
	
		/deep/.u-form-item__message {
			position: absolute;
			bottom: -12px;
			left: -38px;
		}
	
		/deep/.u-list-item {
			margin: 4rpx;
		}
	}

</style>
